<template>
  <svg v-if="width && height" aria-hidden="true" class="overflow-hidden fill-[currentColor]" :width="width"
    :height="height" :viewBox="`0 0 ${width} ${height}`">
    <use :xlink:href="symbolId" />
  </svg>

  <svg v-else aria-hidden="true" class="overflow-hidden fill-[currentColor]">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<script setup>
import { computed } from 'vue'

// 定义组件属性
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  prefix: {
    type: String,
    default: 'icon',
  },
  width: {
    type: [Number, String],
    required: false,
  },
  height: {
    type: [Number, String],
    required: false,
  },
})

// 计算symbolId
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>

<!-- <style scoped>
.svg-icon {
  width: 12px;
  height: 12px;
  fill: currentColor;
  overflow: hidden;
}
</style> -->